<template>
  <div class="userList back-white">
    <div>
      <page-title>视频管理</page-title> 
    </div>
    <div class="search-box">
      <el-input class="search-input" v-model="keywordSearch" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="subSeach">搜索</el-button> 
      <div class="list-state">
        状态：
        <el-select @change="selectChange" v-model="optionsValue" placeholder="请选择" >
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="float-right">
        总计{{user_num}}条数据，
        <!-- <span style="color:red;font-weight:bold;line-height:40px;">{{not_audit_num}}</span>条待处理 -->
      </div> 
    </div> 

    <div class="content clear-both ">

      <div class="photo-group float-left" v-for="(item,index) in videoDataList" :key="index">
        <div class="img-box" @click="ditailPhoto(item)" >
          <img v-lazy="item.video+'?x-oss-process=video/snapshot,t_7000,f_jpg,w_686,h_1040'">
          <div class="state text-center" v-if="item.review==1">已审核</div>
        </div> 
        <div class="info"> 
          <div class="name">{{item.user_id}}</div>
          <div class="name">{{item.author_name}}</div>
          <div class="name">{{item.video_create_at}}</div>
        </div>
      </div>
      <div class="text-center" v-if="videoDataList.length==0">暂无数据</div>

    </div>
    <div class="pagination text-center"> 
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageChange" 
          :page-sizes="[40, 60 , 80 ]"
          :page-size="40"
          layout="sizes, prev, pager, next"
          :total="pageCount">
        </el-pagination>
    </div>
    <!--审核详情-->
    <el-dialog title="视频详情"  center :visible.sync="dialogFormVisible" width="700px"> 
        <div class="dialog-content clear-both">
          <div class="user-info">
            <div class="text-center">{{detailForm.author_name}}</div>
            <!-- <div class="text-center">UID：{{detailForm.author_uuid}}</div> -->
          </div>  
          <div>
            <div class="photo-group float-left"  >
              <div class="img-box" v-if="dialogFormVisible">
                <video width="100%" height="100%" autoplay="autoplay" controls="controls" :src="detailForm.video" style=" object-fit: fill"></video>
              </div>  
              <div class="content-info text-center">{{detailForm.content}}</div>  
            </div> 
          </div> 
          <div class="text-center">
            <span>话题</span>
            <el-select 
              filterable  
              v-model="topicValue" 
              placeholder="请选择" 
            >
              <el-option
                v-for="item in topicData"
                :key="item.topic_id"
                :label="item.topic"
                :value="item.topic_id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div slot="footer" class="dialog-footer"> 
          <el-button type="primary" @click="recommend(0)" v-if='detailForm.recommended==1'>取消推荐</el-button>
          <el-button type="primary" @click="recommend(1)" v-if='detailForm.recommended==0'>推荐</el-button>
          <el-button type="success" @click="passDown(1)" v-if="detailForm.review==0">通过</el-button>
          <el-button type="" @click="passDown(0)">删除</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script >
  import * as api from './../../../api/api';
  export default {
    data(){
      return { 
        keywordSearch:'', 
        stateOptions: [{
          value: '2',
          label: '全部'
        },{
          value: '0',
          label: '待审核'
        },{
          value: '1',
          label: '已审核'
        }],
        optionsValue: '2',

        videoDataList: [], //用户列表
        pageCount: 0, //总数
        curPage:1, //当前页数
        pageSize:40, //一页显示多少条
        not_audit_num:0, //待审核条数
        user_num:0,
        dialogFormVisible:false,
        
        detailForm:{},   
        topicValue:'',
        topicData:[],
      }
    },
    created(){
      this.getPhotowallListData();
      this.getTopicList();
    },
    methods:{
      subSeach(){ 
        this.curPage=1;
        this.getPhotowallListData();
        // if(this.keywordSearch){
          
        // }else{
        //   this.$message({
        //     showClose: true,
        //     message: '请输入关键字',
        //     type: 'warning'
        //   });
        // }   
      },
      //获取用户列表数据
      getPhotowallListData(){ 
        let vm = this;
        let body={
           page:vm.curPage, //当前页数
           size:vm.pageSize,  //一页显示多少条
          content:vm.keywordSearch,
          review:vm.optionsValue,
          kind:2
        } 
        vm.videoDataList=[];
        api.getArtList(body).then(res=>{  
            if(res.data.code==300000){
              console.log(res.data.data);
              res.data.data.data?vm.videoDataList=res.data.data.data:vm.videoDataList=[];  
              vm.pageCount=res.data.data.info.total;
              // vm.not_audit_num=res.data.data.not_audit_num;
              vm.user_num=res.data.data.info.total;
            }
        })
      },
      // 当前页数
      pageChange(e){
        this.curPage = e;
        this.getPhotowallListData();
      },
      pageSizeChange(e){
        this.pageSize=e;
        this.getPhotowallListData();
      },
      toggleAccount(status,uuid){ //启用/禁用账号
        let vm = this;
        let body = {
          uuid:uuid,
          status:parseInt(status)
        };
        api.editForbidden(body).then((res) => {
          if(res.data.code == 300000){
            vm.getPhotowallListData();
          } 
        })
      },
      ditailPhoto(item){ //跳转到编辑
        let vm = this; 
        vm.dialogFormVisible=true;
        vm.detailForm=item;
        vm.topicValue=item.topic_id?item.topic_id:''
      },
      
      setUserPhoto(val,item){
        let vm = this;
        let body={
          uuid:vm.userUid,
          link:item.link,
          serial_num:item.serial_num
        };
        if(val=='delete'){
          api.deletePhotowall(body).then(res=>{
            if(res.data.code==300000){
              vm.ditailPhoto({uuid:vm.userUid});
            }
          })
        }else if(val=='set'){
          api.setcoverPhotowall(body).then(res=>{
            if(res.data.code==300000){
              vm.ditailPhoto({uuid:vm.userUid});
            }
          })
        }
      }, 
      editList(){ //提交 
        let vm = this; 
        vm.dialogFormVisible = false; 
      }, 
      selectChange(e){ 
        this.optionsValue=e;
        this.getPhotowallListData();
      },
      getTopicList(){
        let vm = this;
        api.getTopicList( ).then(res=>{
          if(res.data.code==300000&&res.data.data){
            res.data.data.data?vm.topicData=res.data.data.data:vm.topicData=[];
          }
        });
      },  
      //推荐
      recommend(val){
        let vm = this;
        let body={
          recommended:val,
          topic_id:vm.topicValue?vm.topicValue:vm.detailForm.topic_id,
          article_id:vm.detailForm.art_id,
        };
        api.recommendVideo(body).then(res=>{
          if(res.data.code==300000){
            if(val==1){
              vm.$message({
                message: '推荐成功',
                type: 'success'
              });
            }else{
              vm.$message({
                message: '已取消推荐',
                type: 'success'
              });
            }
            vm.videoDataList.forEach((item,index)=>{
              if(item.art_id==vm.detailForm.art_id){
                item.recommended=val;
                item.topic_id=vm.topicValue?vm.topicValue:vm.detailForm.topic_id;
              }
            });
            vm.dialogFormVisible=false;
          } 
        });
      },
      //审阅视频
      passDown(val){
        let vm = this;
        let body={
          review:val,
          topic_id:vm.topicValue?vm.topicValue:vm.detailForm.topic_id,
          article_id:vm.detailForm.art_id,
        };
        api.reviewVideo(body).then(res=>{
          vm.videoDataList.forEach((item,index)=>{
            if(item.art_id==vm.detailForm.art_id&&val==1){
              item.review=val;
            }else if(item.art_id==vm.detailForm.art_id&&val==0){ 
              vm.getPhotowallListData()
            }
          });
          vm.dialogFormVisible=false;
        });
      },

    }
  }
</script>
<style lang="scss" scoped>
    .search-box{
      padding:20px;
      .search-input{
        width:200px !important;
      }
      .list-state{
        display:inline-block;
        margin-left:20px;
      }
    }
    .content{
      width:100%;
      height:100%;
      padding:20px;
      .photo-group{ 
        height:280px;
        margin-left:25px;
        margin-bottom:25px; 
        border-radius:6px;
        cursor:pointer;
        .img-box{
          width:170px;
          height:200px;
          position:relative;
          .state{
            position:absolute; 
            border-radius:6px;
            top:0;
            left:0;
            width:100%;
            height:100%;
            // top:50%;
            // left:50%;
            // margin-top:-20px;
            // margin-left:-35px;
            // width:70px;
            // height:36px;
            line-height:200px;
            font-size:22px;
            font-weight:bold;
            color:#67C23A;
            background:rgba(64,158,255,.3);
          }
          img{
            width:100%;
            height:100%;
            border-radius:6px;
          }
        } 
        .info{  
          width:170px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          .name{
            font-size: 16px; 
            margin-top:6px;
          }
        }
      }
    }
    .dialog-content{
      .user-info{ 
        margin-bottom:10px;
        div{
          font-size:18px;
          font-weight:bold;
          color:#000;
        }
        
      }
      
      .photo-group{  
        margin-bottom:5px; 
        border-radius:6px; 
        width:100%;
        .img-box{
          width:300px;
          height:300px; 
          margin:auto;
          img{
            width:100%;
            height:100%;
            border-radius:6px;
          }
        } 
        .content-info{
          font-size:16px;
          color:#333;
          padding:10px 0;
        }
        .dialog-btn-box{
          margin-top:20px;
          .btn-size{
            padding: 6px 10px !important;
          }
          .btn-left{
            margin-left:0 !important;
          }
        }
      }
    }
    .pagination{
      display:block;
      width:100%;
      padding-bottom:60px;
    }
</style>